@extends('shop.app')
@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="slider-wrapper theme-default">
            <!--<div class="ribbon"></div>-->
            <div id="slider1" class="nivoslider">
                <a href="#"><img src="/img/header_01.jpg" alt="" title="This is an example of a caption<br>This is the second caption line"></a>
                <a href="#"><img src="/img/header_02.jpg" alt="" title=""></a>
                <img src="/img/header_03.jpg" alt="" title="Another caption example">
            </div>
        </div>
    </div>
</div>
<div class="row">

    <div class="col-xs-12 col-sm-8">

        <!-- START CONTENT ITEM -->
        <div class="row">
            <div class="col-xs-9">
                <h2>Special selection</h2>
            </div>
            <div class="col-xs-3">
                <div class="social-icons pull-right">
                    <a href="#"><img src="/img/icon-facebook.png" alt="facebook"></a>
                    <a href="#"><img src="/img/icon-twitter.png" alt="twitter"></a>
                    <a href="#"><img src="/img/icon-linkedin.png" alt="linkedin"></a>
                    <a href="#"><img src="/img/icon-rss.png" alt="rss"></a>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

        <!-- START CONTENT ITEM -->
        <div class="row product-list-inline-small">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="thumbnail">
                    <a href="shop/detail"><img src="/img/product_01.jpg" alt=""></a>
                    <div class="caption">
                        <a href="shop/detail">Product A</a>
                        <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="thumbnail">
                    <a href="shop/detail"><img src="/img/product_02.jpg" alt=""></a>
                    <div class="caption">
                        <a href="shop/detail">Product B</a>
                        <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="thumbnail">
                    <a href="shop/detail"><img src="/img/product_03.jpg" alt=""></a>
                    <div class="caption">
                        <a href="shop/detail">Product C</a>
                        <p>Lorem ipsum dolor sit amet <span class="label label-important price pull-right">&euro; 123,-</span></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

        <!-- START CONTENT ITEM -->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-md-6">
                <div class="article">
                    <article>
                        <img src="/img/nominate.png" align="right">
                        <h4>Newly Nominated!</h4>
                        <h5>Vote for us now!</h5>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. <a href="column3.html">More <span class="glyphicon glyphicon-chevron-right"></span></a></p>
                    </article>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-md-6">
                <div class="article">
                    <article>
                        <img src="/img/starway.png" align="right">
                        <h4>Use the star way!</h4>
                        <h5>Order now!</h5>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="column3.html">More <span class="glyphicon glyphicon-chevron-right"></span></a></p>
                    </article>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>

    <div class="hidden-xs col-sm-4 col-md-4 col-lg-4">

        <!-- START CONTENT ITEM -->
        <br>
        <div class="row">
            <div class="col-xs-12">
                <div class="well well-small">
                    <ul class="nav nav-list">
                        <li class="nav-header">Top 3 most popular</li>
                        <li><a href="shop/detail">Product A</a></li>
                        <li><a href="shop/detail">Product B</a></li>
                        <li><a href="shop/detail">Product C</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

        <!-- START CONTENT ITEM -->
        <div class="row">
            <div class="col-xs-12">
                <div class="well well-small">
                    <ul class="nav nav-list">
                        <li class="nav-header">Top 3 best selling</li>
                        <li><a href="shop/detail">Product D</a></li>
                        <li><a href="shop/detail">Product E</a></li>
                        <li><a href="shop/detail">Product F</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

        <!-- START CONTENT ITEM -->
        <div class="row">
            <div class="col-xs-12">
                <div class="slider-wrapper theme-light">
                    <div class="ribbon"></div>
                    <div id="slider2" class="nivoslider">
                        <img src="/img/banner_01-v3.jpg" alt="" title="This is an example of an optional long caption text" />
                        <img src="/img/banner_02-v3.jpg" alt="" title="" />
                        <img src="/img/banner_03-v3.jpg" alt="" title="" />
                        <img src="/img/banner_04-v3.jpg" alt="" title="Another caption" />
                    </div>
                </div>
                <br>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>
</div>

<hr>

<div class="row">
    <div class="col-xs-12">

        <!-- START CONTENT ITEM -->
        <div class="product-list-inline-large">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail light">
                    <a href="shop/detail?img=/img/product_04.jpg">
                        <span class="label label-info price">&euro; 2,<sup>99</sup></span>
                        <span class="label label-danger price price-over">&euro; 1,<sup>99</sup></span>
                        <img data-hover="/img/product_04b.jpg" src="/img/product_04.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail?img=//img/product_04.jpg">Product A</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail dark">
                    <a href="shop/detail?img=/img/product_05.jpg">
                        <div class="label label-info price">&euro; 93,<sup>99</sup></div>
                        <img data-hover="/img/product_05b.jpg" src="/img/product_05.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail?img=/img/product_05.jpg">Product B</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail light">
                    <a href="shop/detail?img=/img/product_06.jpg">
                        <div class="label label-info price">&euro; 123,<sup>99</sup></div>
                        <img data-hover="/img/product_06b.jpg" src="/img/product_06.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail?img=/img/product_06.jpg">Product C</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail dark">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 123,<sup>99</sup></div>
                        <span class="label label-danger price price-over">&euro; 122,<sup>99</sup></span>
                        <img data-hover="/img/product_07b.jpg" src="/img/product_07.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product D</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>
</div>

<div class="row">
    <div class="col-xs-12">

        <!-- START CONTENT ITEM -->
        <div class="product-list-inline-large">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail dark">
                    <a href="shop/detail">
                        <span class="label label-info price">&euro; 2,<sup>99</sup></span>
                        <img data-hover="/img/product_08b.jpg" src="/img/product_08.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product A</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail light">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 93,<sup>99</sup></div>
                        <img data-hover="/img/product_09b.jpg" src="/img/product_09.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product B</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail dark">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 123,<sup>99</sup></div>
                        <span class="label label-danger price price-over">&euro; 999,<sup>99</sup></span>
                        <img data-hover="/img/product_10b.jpg" src="/img/product_10.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product C</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail light">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 123,<sup>99</sup></div>
                        <img data-hover="/img/product_11b.jpg" src="/img/product_11.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product D</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>
</div>

<div class="row">
    <div class="col-xs-12">

        <!-- START CONTENT ITEM -->
        <div class="product-list-inline-large">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail light">
                    <a href="shop/detail">
                        <span class="label label-info price">&euro; 2,<sup>99</sup></span>
                        <img data-hover="/img/product_12b.jpg" src="/img/product_12.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product A</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail dark">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 93,<sup>99</sup></div>
                        <span class="label label-danger price price-over">&euro; 89,<sup>99</sup></span>
                        <img data-hover="/img/product_13b.jpg" src="/img/product_13.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product B</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail light">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 123,<sup>99</sup></div>
                        <img data-hover="/img/product_14b.jpg" src="/img/product_14.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product C</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="thumbnail dark">
                    <a href="shop/detail">
                        <div class="label label-info price">&euro; 123,<sup>99</sup></div>
                        <img data-hover="/img/product_15b.jpg" src="/img/product_15.jpg" alt="">
                    </a>
                    <div class="caption">
                        <a href="shop/detail">Product D</a>
                    </div>
                    <a href="products.html" class="btn btn-default btn-block">all products in category</a>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>
</div>
@endsection